import React,{useState} from 'react'
import {useNavigate} from 'react-router-dom'
import {
    Button,
    Input,
    Select,
    Form,
    Radio,
    message,
 } from 'antd'
 import store from '../../../../store/LeiZheng'
import './index.scss'
import {observer} from 'mobx-react'

const {Option} = Select
const {goods} = store
const { TextArea } = Input;
export default observer(function AddGoods() {
    const navigate = useNavigate()
    const [imageUrl, setImageUrl] = useState();
    const handleChangeType = (value) => {
        console.log(`selected ${value}`);
    };
    const cancel = ()=>{
        navigate(-1)
    }
    const onFinish = (values) => {
        // console.log('Success:', values);
        message.success('保存成功！正在跳转……')
        goods.addGoods(values,imageUrl)
        setTimeout(() => {
            navigate('/home/goodsManagement')
        }, 2000);
    };
    const onFinishFailed = () => {
        // console.log('Failed:', errorInfo);
        message.warning('请填写必要信息后保存!')
    };
    //上传封面handler
    const uploadFile = (e)=>{
        const fileData = e.target.files[0];
        const pettern = /^image/;
        if (!pettern.test(fileData.type)) {
          message.error("图片格式不正确");
          return;
      }
        const reader = new FileReader()
        reader.readAsDataURL(fileData)
        reader.onload = ()=>{
            setImageUrl(reader.result) 
        }
      }
  return (
    <div className='addgoods'>
        <h2 className='title'>新增商品</h2>
        <Form onFinish={onFinish}
        onFinishFailed={onFinishFailed}
         className="form" initialValues={{status:'上架',postage:0,goodsWeight:999}}>
            <Form.Item className="from-item"
             rules={[{required:true,message:'请选择类目'}]}
             label='类目' name={'goodsType'}
             >
                <Select allowClear placeholder='请选择' style={{ width: 180 }} onChange={handleChangeType}>
                    {
                    goods.goodsType.map((i)=>{
                            return  <Option key={i} value={i}>{i}</Option>
                        })
                    }
                </Select>
            </Form.Item>
            <Form.Item label="图片"
             rules={[{required:true,message:'请选择图片'}]}
             name={'imgSrc'}
            >
                 {imageUrl ? (
                    <img
                    src={imageUrl}
                    alt="avatar"
                    value={imageUrl}
                    style={{
                        width: '60px',
                    }}
                    />
                ) : (
                    <div className="file">
                        选择封面
                        <input type="file" value={imageUrl} onChange={(e)=>uploadFile(e)} />
                    </div>                  
                )}
            </Form.Item>
            <Form.Item
             rules={[{required:true,message:'请输入名称'}]}
             label='名称' name={'goodsName'}>
                <Input placeholder='名称' />
            </Form.Item>
            <Form.Item
             rules={[{required:true,message:'请输入价格'}]}
             label='价格' name={'price'}>
                <Input placeholder='价格' />
            </Form.Item>
            <Form.Item
             rules={[{required:true,message:'请选择状态'}]}
             label='状态' name={'status'}>
                <Radio.Group>
                    <Radio.Button value="上架"> 上架 </Radio.Button>
                    <Radio.Button value="下架"> 下架 </Radio.Button>
                </Radio.Group>
            </Form.Item>
            <Form.Item
             rules={[{required:true,message:'请输入权重'}]}
             label='权重' name={'goodsWeight'}>
                <Input placeholder='权重' />
            </Form.Item>
            <Form.Item
             rules={[{required:true,message:'请输入邮费'}]}
             label='邮费' name={'postage'}>
                <Input placeholder='邮费' />
            </Form.Item>
            <Form.Item label="商品介绍" name={'goodsIntd'}
            rules={[{required:true,message:'请输入商品介绍'}]}>
                <TextArea allowClear showCount maxLength={111} placeholder='商品介绍' draggable rows={2} />
            </Form.Item>
            <Form.Item className='from-item'>
                <Button className='btn' type="primary" htmlType="submit">
                    保存
                </Button>
                <Button onClick={cancel} style={{backgroundColor:'gray'}} className='btn' htmlType='button'>取消</Button>
            </Form.Item>
        </Form>
    </div>
  )
})
